<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>考试系统首页</title>
  <link rel="stylesheet" href="/static/web/css/style.css?v=" + Date.now() >
  <style>
    .banner {
      width: 100%;
      max-width: 960px;
      height: 300px;
      margin: 20px auto;
      overflow: hidden;
      border-radius: 10px;
      position: relative;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .banner img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      transition: opacity 1s ease;
      opacity: 0;
    }

    .banner img.active {
      opacity: 1;
    }

    .main-menu {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      max-width: 960px;
      margin: 30px auto;
    }

    .main-menu a {
      flex: 1 1 40%;
      margin: 10px;
      padding: 20px;
      background-color: #007bff;
      color: white;
      font-size: 18px;
      border-radius: 10px;
      text-align: center;
      text-decoration: none;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      transition: all 0.3s ease;
    }

    .main-menu a:hover {
      background-color: #0056b3;
      transform: translateY(-3px);
    }
  </style>
  <script src="/static/component/jquery_3.3.1.js"></script>

</head>
<body class="container">
  <div class="wrapper">
    <main>
      <h1 style="text-align:center; margin-top: 20px; background-color: #9a6e3a">🎓 欢迎进入在线考试系统</h1>

      <!-- 轮播图 -->
      <div class="banner" id="banner">
        <img src="/static/web/images/banner1.jpg" class="active" alt="图1">
        <img src="/static/web/images/banner2.jpg" alt="图2">
        <img src="/static/web/images/banner3.jpg" alt="图3">
      </div>

      <!-- 菜单入口 -->
      <div class="main-menu">
        <a href="/web/examList.html">📋 考试列表</a>
        <a href="/web/records.html">📈 我的考试记录</a>
        <a href="/web/wrongQuestions.html">❌ 错题集</a>
        <a href="/web/profile.html">👤 修改个人信息</a>
      </div>
    </main>
  </div>

  <script src="/static/web/js/layout.js?v=" + Date.now() ></script>
  <script src="/static/web/js/checklogin.js?v=" + Date.now() ></script>
  <script>
    // 简单轮播图逻辑
    const imgs = document.querySelectorAll(".banner img");
    let current = 0;
    setInterval(() => {
      imgs[current].classList.remove("active");
      current = (current + 1) % imgs.length;
      imgs[current].classList.add("active");
    }, 3000);
  </script>
</body>
</html>
